<template>
  <div class="container-index">
    <!-- 数据展示 -->
       <dataShow></dataShow>     
       <div class="two">
          <!-- 饼状图 -->
          <pie></pie>
          <!-- 矩形图 -->
          <region></region>
       </div>
       <!-- 折线图 -->
   <Mypolyline></Mypolyline>
   <!-- 查询 -->
   <MySearch @searchDataFun="searchDataFun" @exportDataParent="exportDataParent"></MySearch>
   <!-- 列表 -->
   <MyTable :arr="arr" @restArr="initLjData"></MyTable>
   <!-- 分页 -->
   <MyPage @SizeChange="SizeChange" @CurrentChange="CurrentChange" :total="total"></MyPage>
   <!-- 弹框 -->
   <MyDialog></MyDialog>

  </div>
</template>

<script>
import dataShow from './components/dataShow.vue'//数据
import region from './components/region.vue'//柱状
import pie from './components/pie.vue'//饼状
import Mypolyline from './components/Mypolyline.vue'//折线
import MySearch from './components/MySearch.vue'//查找
import MyTable from './components/MyTable.vue'//表格
import MyPage from './components/MyPage.vue'//分页
import MyDialog from './components/MyDialog.vue'//弹框
import { getLjDataApi } from "../../api/ljjApi";
import {export_json_to_excel} from '../../untial/Export2Excel'
export default {
    components:{
        dataShow,
        region,
        pie,
        Mypolyline,
        MySearch,
        MyTable,
        MyPage,
        MyDialog
    },
    data(){
        return{
            arr:[],//保存数据
            keyWord:'',//搜索关键字
            page:1,//当前页码
            pageSize:20,//每页显示多少条
            total:0//一共多少条
        }

    },
    mounted() {
        this.initLjData()
    },
    methods: {
        formatJson(filterVal,jsonData){
            return jsonData.map(v=>filterVal.map(j=>{
                return v[j]
            }))
        },
        //导出excel
        exportDataParent(){
            //自定义头部
            const tHeader = ['编号','上报单位','值班日期','上报时间','道路','路况']
            //自定义字段
            const filterVal = ['id','unit','workDate','date','road','condition']
            //根据自定义字段筛选需要的值
            const data = this.formatJson(filterVal,this.arr)
            export_json_to_excel({
                header:tHeader,//excel头部列表
                data,//数据
                filename:'路况详情',//文件名称
                autoWidth:true,//自适应宽
                bookType:'xlsx'//文件类型
            })
        },
        //改变页码
        CurrentChange(val){
            this.page=val
            this.initLjData(val)
        },
        //改变条数
        SizeChange(val){
            this.pageSize=val
            this.initLjData(val)
        },
        //渲染
        initLjData(){
            getLjDataApi({keyWord:this.keyWord,page:this.page,pageSize:this.pageSize}).then(res=>{
                if(res.code==200){
                    this.arr=res.data
                    this.total=res.total
                }
            })
        },
        //查询
        searchDataFun(val){
            this.keyWord = val
            this.initLjData(val)
        },
    },

}
</script>

<style lang="less" scoped>
.two{
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,0.4);
}

</style>